<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>销售订单</title>
<!-- 引入JQuery -->
<script type="text/javascript" src="${pageContext.request.contextPath}/statics/jquery-easyui-1.5.2/jquery.min.js"></script>
<!-- 引入EasyUI -->
<script type="text/javascript" src="${pageContext.request.contextPath}/statics/jquery-easyui-1.5.2/jquery.easyui.min.js"></script>
<!-- 引入EasyUI的中文国际化js，让EasyUI支持中文 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/statics/jquery-easyui-1.5.2/locale/easyui-lang-zh_CN.js"></script>
<!-- 引入EasyUI的样式文件-->
<link rel="stylesheet" href="${pageContext.request.contextPath}/statics/jquery-easyui-1.5.2/themes/default/easyui.css" type="text/css"/>
<!-- 引入EasyUI的图标样式文件-->
<link rel="stylesheet" href="${pageContext.request.contextPath}/statics/jquery-easyui-1.5.2/themes/icon.css" type="text/css"/>
</head>
<body>
	<input id="tt" class="easyui-textbox" style="width:15%;" data-options="
			prompt: '订单号',
			iconWidth: 22,
			icons: [{
				iconCls:'icon-check'}]
	">
	&nbsp;&nbsp;
	<input class="easyui-datebox" style="width:10%;" data-options="sharedCalendar:'#cc'">
	<div id="cc" class="easyui-calendar"></div>
	&nbsp;&nbsp;
	<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" style="width:10%;">Search</a>
	<h4>销售列表</h4>
	<hr>
	<div style="width:80%;">
		<table class="easyui-datagrid" title="销售单列表" 
						data-options="singleSelect:true,collapsible:true,url:'datagrid_data1.json',method:'get'">
				<thead>
					<tr>
						<th data-options="field:'itemid',width:80,align:'center'">序号</th>
						<th data-options="field:'orderNo',width:200,align:'center'">订单编号</th>
						<th data-options="field:'dealerName',width:200,align:'center'">供货厂商</th>
						<th data-options="field:'date',width:200,align:'center'">创建时间</th>
						<th data-options="field:'payment',width:80,align:'center'">是否付款</th>
						<th data-options="field:'status',width:100,align:'center'">订单状态</th>
						<th data-options="field:'operate',width:200,align:'center'">操作</th>
					</tr>
				</thead>
				<tbody>
					<!-- 此处的内容是由后台的Ajax请求后台返回的JSON进行显示的 -->
					<tr>
						<td>1</td>
						<td>GT000001</td>
						<td>郑州xx车业有限公司</td>
						<td>2017-08-28 12:12:12</td>
						<td>否</td>
						<td>等待确认</td>
						<td><a href="#">详情</a></td>
					</tr>
					<tr>
						<td>1</td>
						<td>GT000001</td>
						<td>郑州xx车业有限公司</td>
						<td>2017-08-28 12:12:12</td>
						<td>否</td>
						<td>等待确认</td>
						<!-- 退货超链接要根据订单表中订单的状态【正在处理/已确认】进行显示 -->
						<td><a href="javascript:void(0)" onclick="$('#dlg').dialog('open');">详情</a></td>
					</tr>
				</tbody>
		</table>
		<div class="easyui-panel">
			<div class="easyui-pagination" data-options="total:114"></div>
		</div>
	</div>
	<!-- 显示订单详情 -->
	<div id="dlg" class="easyui-dialog" title="订单详情" style="width:600px;height:500px;padding:10px"
			data-options="
				iconCls: 'icon-save',
				toolbar: '#dlg-toolbar',
				buttons: '#dlg-buttons'
			">
			<!-- 手风琴显示订单详情 -->
			<div class="easyui-accordion" style="width:100%;height:80%;">
				<div title="About" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
					<h4 style="color:#0099FF">订单编号:&nbsp;&nbsp;<span style="color: black;">GT000001</span></h4>
					<h4 style="color:#0099FF">供货厂商:&nbsp;&nbsp;<span style="color: black;">郑州xx车业有限公司</span></h4>
					<h4 style="color:#0099FF">创建时间:&nbsp;&nbsp;<span style="color: black;">2017-08-28 12:12:12</span></h4>
					<h4 style="color:#0099FF">是否付款:&nbsp;&nbsp;<span style="color: black;">否</span></h4>
					<h4 style="color:#0099FF">订单状态:&nbsp;&nbsp;<span style="color: black;">正在处理</span></h4>
				</div>
				<div title="订单项" data-options="iconCls:'icon-help'" style="padding:10px;">
					<table class="easyui-datagrid" style="width:100%;height: 100%;">
						<thead>
							<tr>
								<th data-options="field:'itemid',width:50,align:'center'">序号</th>
								<th data-options="field:'carTypeName',width:100,align:'center'">车型名称</th>
								<th data-options="field:'engine',width:100,align:'center'">发动机</th>
								<th data-options="field:'color',width:100,align:'center'">颜色</th>
								<th data-options="field:'count',width:100,align:'center'">数量</th>
								<th data-options="field:'singleTotal',width:100,align:'center'">总价</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>1</td>
								<td>敞篷跑车</td>
								<td>SX99908</td>
								<td>宝石蓝</td>
								<td>5</td>
								<td>666666</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
			<!-- 显示订单总价 -->
			<h3 style="color:#0099FF">订单总价:&nbsp;&nbsp;<span style="color: red;font-style: italic;">666666元</span></h3>
			<!-- 确认订单
			确认订单后，订单状态更改为“已确认”				
			/取消订单 -->
			<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" style="width:20%;">确认订单</a>
			<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" style="width:20%;">取消订单</a>
		<div id="dlg-buttons">
			<a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:$('#dlg').dialog('close')">返回</a>
		</div>
	</div>
</body>
<script>
$(function(){
	//首先先关闭dialog
	$('#dlg').dialog('close');
})
/* 确认是否添加至退货列表 */
function confirm(){
		$.messager.confirm('退货', '确认将该项添加至退货列表吗？', function(r){
			if (r){
				return r;
			}
	});
}
</script>
</html>